<template>
	<view>
		<view class="farmers">
			<view>
				<image src="../../../static/rear/banner.png" style="height: 250rpx; width: 750rpx;" mode="aspectFill"></image>
			</view>
			<view style="width: 700rpx; border-bottom: #F0F0F0 solid 2rpx; margin-bottom: 20rpx; padding-bottom: 20rpx; margin-top: 10rpx;">
				<text style="border-left: #07D188 solid 12rpx; padding-left: 20rpx; font-weight: bold; font-size: 32rpx;">{{farmName}}</text>
			</view>
			<view class="farmersButton">
				<!-- <view class="button1 animated bounceInLeft slow" @click="clickTo(1)">
					<image src="../../../static/rear/a.png" style="width: 100rpx; height: 100rpx;" mode="aspectFit"></image>
					<text>生猪基本信息管理</text>
				</view> -->
				<view class="button2 animated bounceInRight slow" @click="clickTo(2)">
					<image src="../../../static/rear/b.png" style="width: 100rpx; height: 100rpx;" mode="aspectFit"></image>
					<text>饲养情况管理</text>
				</view>
				<view class="button3 animated bounceInLeft slow" @click="clickTo(3)">
					<image src="../../../static/rear/c.png" style="width: 100rpx; height: 100rpx;" mode="aspectFit"></image>
					<text>饲养饲料管理</text>
				</view>
				<view class="button4 animated bounceInRight slow" @click="clickTo(4)">
					<image src="../../../static/rear/d.png" style="width: 100rpx; height: 100rpx;" mode="aspectFit"></image>
					<text>疾病防治药品管理</text>
				</view>
				<view class="button5 animated bounceInLeft slow" @click="clickTo(5)">
					<image src="../../../static/rear/e.png" style="width: 100rpx; height: 100rpx;" mode="aspectFit"></image>
					<text>消毒管理</text>
				</view>
				<view style="width: 720rpx; height: 250rpx;" class="button6 animated bounceInRight slow" @click="clickTo(6)">
					<image src="../../../static/rear/f.png" style="width: 100rpx; height: 100rpx;" mode="aspectFit"></image>
					<text>生猪生长环境管理</text>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default{
		data () {
			return {
				farmName: '',
				farmId: ''
			}
		},
		onLoad: function(option) {
			this.farmName = option.farmName
			this.farmId = option.farmId
		},
		methods: {
			//养殖户按钮跳转
			clickTo(val) {
				switch(val) {
					// case 1:
					// 	uni.navigateTo({
					// 		url: '../farmer/livestock_tag?farmId=' + this.farmId
					// 	})
					// 	break;
					case 2:
						uni.navigateTo({
							url: '../farmer/pig_list?farmId=' + this.farmId
						})
						break;
					case 3:
						uni.navigateTo({
							url: '../farmer/feedManagement?farmId=' + this.farmId
						})
						break;
					case 4:
						uni.navigateTo({
							url: '../farmer/drugs?farmId=' + this.farmId
						})
						break;
					case 5:
						uni.navigateTo({
							url: '../farmer/disinfection?farmId=' + this.farmId
						})
						break;
					default:
						uni.navigateTo({
							url: '../farmer/environment?farmId=' + this.farmId
						})
						break;
				}
			}
		}
		
	}
</script>

<style lang="less">
	@import "../../../common/animate.css";
	page{
		width: 100%;
	}
	//养殖户
	.farmers{
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.farmersButton{
		width: 750rpx;
		height: auto;
		display: flex;
		flex-wrap: wrap;
		// position: absolute;
		// top:50%;
		// left:50%;
		// transform: translate(-50%,-50%);
		
	
		view {
			margin: auto;
			width: 350rpx;
			height: 230rpx;
			margin-bottom: 20rpx;
			color: white;
			font-size: 36rpx;
			font-weight: bold;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-radius: 20rpx;
		}
		.button1 {
			background: -webkit-linear-gradient(bottom, #9ED35E 30%, #ACD773 50%, #B7DB84 80%);
		}
		
		.button1:active {
			background-color: #a1db57;
		}
		
		.button2 {
			background: -webkit-linear-gradient(bottom, #FB8B5C 30%, #F99363 50%, #F5AC7C 80%);
		}
		
		.button2:active {
			background-color: #eda085;
		}
		
		.button3 {
			background: -webkit-linear-gradient(bottom, #F1C760 30%, #EFCD76 50%, #EDD288 80%);
		}
		
		.button3:active {
			background-color: #ddbe75;
		}
		
		.button4 {
			background: -webkit-linear-gradient(bottom, #7F8BE3 30%, #8E97E8 50%, #9BA7EF 80%);
		}
		
		.button4:active {
			background-color: #F689A5;
		}
		
		.button5 {
			background: -webkit-linear-gradient(bottom, #EC8CA6 30%, #EF959C 50%, #F39C94 80%);
		}
		
		.button5:active {
			background-color: #cf7184;
		}
		
		.button6 {
			background: -webkit-linear-gradient(bottom, #4FD4B3 30%, #64E1AD 50%, #73EBA8 80%);
		}
		
		.button6:active {
			background-color: #64bc9a;
		}
	}
	.cu-bar {
		margin-top: 40rpx;
		margin-left: 20rpx;
	}
</style>
